﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>商品规格</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="__STATIC__heiseshop_admin/style/adminStyle.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="__STATIC__heiseshop_admin/css/amazeui.min.css" />
<link rel="stylesheet" href="__STATIC__heiseshop_admin/css/amazeui.datatables.min.css" />
<link rel="stylesheet" href="__STATIC__heiseshop_admin/css/app.css">
<script src="__STATIC__heiseshop_admin/js/jquery.js"></script>
<script src="__STATIC__heiseshop_admin/js/amazeui.min.js"></script>
</head>
<body>
 <div class="wrap">
  <div class="page-title">
    <span class="modular fl"><i></i><em>商品规格</em></span>
  </div>
  
  <style>
      .son_row {margin-left: 10px!important;}
      .parent_row {border:1px solid #ccc; margin-top: 10px;}
      .parent_row , .son_row , .guige_xiang {padding: 5px}
      .add_guige_son{margin-left:10px;width:110px;border:none;color:black;text-align: center;background: #f8f8f8}
      .guige_xiang {margin-left: 0px!important; height: 40px; line-height: 40px}
      .add_guige_xiang{margin-left:10px;width:110px;border:none;color:black;text-align: center;background: #f8f8f8}
      .del_guige{margin-left:10px;width:110px;border:none;color:black;text-align: center;background: #f8f8f8}            
      .kuang{margin-left:10px;height: 30px;width:110px;border:1px solid black;color:black;text-align: center;background: #fff}            
      .guige_xiang input , .guige_xiang button {height: 30px;display:block}
      .guige_xiang_wrapper {float: left!important;}
      .guige_xiang_input{height:20px;width: 50px;text-align: center;color:black;float: left}
      .guige_attr_del{height:20px;width:30px;color:black;float: left}
      #add_guige{height:20px;border:none;color:black}
      .liebiao{margin-left:-13px;background:black;color:#fff}            
      .thclass{background: black}
      .am-u-sm-1{width:14%;}
  </style>

  <div class="tpl-content-wrapper guige_page">

          <div class="row ">
                  <!-- <input type="button" class="liebiao" value="刷新表格"> -->

                  <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
                      <div class="widget am-cf">
                          <div class="widget-head am-cf">
                              <div class="widget-title am-fl">产品规格管理</div>
                             
                          </div>
          
                          <div class="widget-body am-fr">
                              <button type="button" id="add_guige">添加产品规格</button>
                              <div id="guige_display">
                                  {foreach name="guige" id="v1" key="k1"}
                                  <div class="row parent_row">
                                      <input class="kuang" type="text" name="name[]" placeholder="规格名称" data-guige-id="{$v1.guige_id}" data-pid="{$v1.pid}" value="{$v1.name}">
                                      <button type="button" class="add_guige_xiang" data-guige-id="{$v1.guige_id}">添加规格项</button>
                                      <button type="button" class="add_guige_son" data-pid="{$v1.guige_id}">添加子规格</button>
                                      <button type="button" class="del_guige" data-id="{$v1.guige_id}">删除规格</button>
          
                                      <div class="row guige_xiang">
                                      {if isset($v1['attr'])}
                                          {foreach name="v1['attr']" id="v2" key="k2"}
                                          <div class="guige_xiang_wrapper am-u-sm-1">
                                              <input type="text" class="guige_xiang_input" name="attr_value[]" value="{$v2.attr_value}" data-attr-id="{$v2.attr_id}" data-guige-id="{$v1.guige_id}">
                                              <button type="button" class="guige_attr_del" data-attr-id="{$v2.attr_id}">删</button>
                                          </div>
                                          {/foreach}
                                      {/if}
                                      </div>
          
                                      {if isset($v1['son'])}
                                      {foreach name="v1['son']" id="v2" key="k2"}
                                          <div class="row son_row">
                                              <input class="kuang" type="text" name="name[]" placeholder="规格名称" data-guige-id="{$v2.guige_id}" data-pid="{$v2.pid}" value="{$v2.name}">
                                              <button type="button" class="add_guige_xiang" data-guige-id="{$v2.guige_id}">添加规格项</button>
                                              <button type="button" class="add_guige_son" data-pid="{$v2.guige_id}">添加子规格</button>
                                              <button type="button" class="del_guige" data-id="{$v2.guige_id}">删除规格</button>
                                              <div class="row guige_xiang">
                                                  {if isset($v1['attr'])}
                                                  {foreach name="v2['attr']" id="v3" key="k3"}
                                                  <div class="guige_xiang_wrapper am-u-sm-1">
                                                      <input type="text" class="guige_xiang_input" name="attr_value[]" value="{$v3.attr_value}" data-attr-id="{$v3.attr_id}" data-guige-id="{$v2.guige_id}">
                                                      <button type="button" class="guige_attr_del" data-attr-id="{$v3.attr_id}">删</button>
                                                  </div>
                                                  {/foreach}
                                                  {/if}
                                              </div>
                                              {if isset($v2['son'])}
                                              {foreach name="v2['son']" id="v3" key="k3"}
                                              <div class="row son_row">
                                                  <input class="kuang"  type="text" name="name[]" placeholder="规格名称" data-guige-id="{$v3.guige_id}" data-pid="{$v3.pid}" value="{$v3.name}">
                                                  <button type="button" class="add_guige_xiang" data-guige-id="{$v3.guige_id}">添加规格项</button>
                                                  <button type="button" class="add_guige_son" data-pid="{$v3.guige_id}">添加子规格</button>
                                                  <button type="button" class="del_guige" data-id="{$v3.guige_id}">删除规格</button>
                                                  <div class="row guige_xiang">
                                                      {if isset($v2['attr'])}
                                                      {foreach name="v3['attr']" id="v4" key="k4"}
                                                      <div class="guige_xiang_wrapper am-u-sm-1">
                                                          <input type="text" class="guige_xiang_input" name="attr_value[]" value="{$v4.attr_value}" data-attr-id="{$v4.attr_id}" data-guige-id="{$v3.guige_id}">
                                                          <button type="button" class="guige_attr_del" data-attr-id="{$v4.attr_id}">删</button>
                                                      </div>
                                                      {/foreach}
                                                      {/if}
                                                  </div>
                                              </div>
                                              {/foreach}
                                              {/if}
                                          </div>
                                      {/foreach}
                                      {/if}
                                  </div>
                                  {/foreach}
                                  <div class="am-u-sm-12 am-u-md-12 am-u-lg-12" >
                                          <div class="widget am-cf" style="color:black">
                                              <div class="widget-head am-cf">
                                                  <div class="widget-title am-fl">
                                                       <button type="button" style="border:none;background:black;color:#fff" class="liebiao" id="liebiao" >刷新表格</button>
                                                  </div>
                                              </div>
                                              <form action="{:url('guding_store')}" method="post">
                                                  <input type="hidden" name="product_id" value="{$Think.get.id}">
                                                  <div  id="show_id">

                                                  </div>
                                                  <button style="background:black;color:#fff" type="submit">保存修改</button>
                                              </form>
                                          </div>
                                      </div>
                              </div>
                          </div>
          
                      </div>
                  </div>
              </div>
          </div>
  </div>
</div>
</div>
</body>
</html>
<script src="__STATIC__heiseshop_admin/js/table.js"></script>
<script>
    $('.guige_page').on('click' , '#add_guige' , function() {
        $.ajax({
            url : 'guige_add',
            data : 'product_id='+$('[name=product_id]').val()+'&pid=0',
            success : function (res) {
                $('#guige_display').append(`<div class="row parent_row">
                            <input type="text" class="kuang" name="name[]" placeholder="规格名称" data-guige-id="`+res.guige_id+`" data-pid="0">
                            <button type="button" class="add_guige_xiang" data-guige-id="`+res.guige_id+`">添加规格项</button>
                            <button type="button" class="add_guige_son" data-pid="`+res.guige_id+`">添加子规格</button>
                            <button type="button" class="del_guige" data-id="`+res.guige_id+`">删除规格</button>
                        </div>`);
            }
        });
        $(this).attr('disabled',true);
    });
    $('.guige_page').on('click' , '.add_guige_son' , function() {
        var _this = $(this)
        $.ajax({
            url: 'guige_add',
            data: 'product_id=' + $('[name=product_id]').val() + '&pid=' + _this.data('pid'),
            success: function (res) {
                $(_this[0].parentNode).append(`<div class="row son_row">
                            <input type="text" class="kuang" name="name[]" placeholder="规格名称" data-guige-id="`+res.guige_id+`" data-pid="`+_this.data('pid')+`" >
                            <button type="button" class="add_guige_xiang" data-guige-id="`+res.guige_id+`">添加规格项</button>
                            <button type="button" class="add_guige_son" data-pid="` + res.guige_id + `">添加子规格</button>
                            <button type="button" class="del_guige" data-id="` + res.guige_id + `">删除规格</button>
                        </div>`);
            }
        });
    });
    $('.guige_page').on('click' , '.add_guige_xiang' , function() {
        var _this = $(this)
        $.ajax({
            url: 'guige_xiang_add',
            data: 'product_id=' + $('[name=product_id]').val() + '&guige_id=' + _this.data('guige-id'),
            success: function (res) {
                console.log($(_this[0].parentNode).find('.guige_xiang').eq(0))
                $(_this[0].parentNode).find('.guige_xiang').eq(0).append(`<div class="guige_xiang_wrapper am-u-sm-1">
                                    <input type="text" class="guige_xiang_input" name="attr_value[]"  data-attr-id="`+res.attr_id+`" data-guige-id="`+_this.data('guige-id')+`">
                                    <button type="button" class="guige_attr_del" data-attr-id="`+res.attr_id+`" >删</button>
                                </div>`);
            }
        });
    });




    $('.guige_page').on('change' , '[name="name[]"]' , function() {
        var names = [];
        $('[name="name[]"]').each(function(i) {
            names[i] = {'name':$(this).val() , 'guige_id':$(this).data('guige-id') , 'pid':$(this).data('pid')};
        })
        names = JSON.stringify(names)

        $.ajax({
            url : 'guige_store',
            data : 'name='+names,
        })
    })

    $('.guige_page').on('change' , '[name="attr_value[]"]' , function() {
        var names = [];
        $('[name="attr_value[]"]').each(function(i) {
            names[i] = {'attr_value':$(this).val() , 'attr_id':$(this).data('attr-id') };
        })
        names = JSON.stringify(names)

        $.ajax({
            url : 'guige_attr_store',
            data : 'name='+names,
        })
    })


    $('.guige_page').on('click' , '.del_guige' , function () {
        var _this = $(this)
        var id = $(this).data('id')
        $.ajax({
            url : 'guige_del',
            data : 'guige_id='+id,
            success : function (res) {
                $(_this[0].parentNode).remove()
            }
        })
    });
    $('.guige_page').on('click' , '.guige_attr_del' , function () {
        var _this = $(this)
        var id = $(this).data('attr-id')
        $.ajax({
            url : 'guige_attr_del',
            data : 'attr_id='+id,
            success : function (res) {
                $(_this[0].parentNode).remove()
            }
        })
    })
$('#liebiao').click(function(){
    var list=[];
    $('[name="name[]"]').each(function(){
        var tmp_obj={};
        tmp_obj.name=$(this).val();
        var guige_xiang=$(this).parent().find('.guige_xiang').eq(0);
        var _vals=[];
        guige_xiang.find('[name="attr_value[]"]').each(function(){
            _vals.push($(this).val())
        })
        tmp_obj.vals=_vals;
        list.push(tmp_obj);
    })             
    
    var a = {
      list:list,
      showId : 'show_id',
      tableClass : "am-table am-table-bordered",
      thClass : '',
      trClass : '',
      tdClass: '',
    }
    __TABLE.init(a);
})        
</script>
